<template>
    <div>
        <div>
            <el-breadcrumb separator="/" style="margin: 8px;">
                <el-breadcrumb-item>预警结果数据</el-breadcrumb-item>
                <el-breadcrumb-item>新型攻击风险预警</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <h3>新型攻击风险预警</h3>
            <div style="margin-top: 20px;">
                <el-form :inline="true" ref="query" :model="query" label-width="150px">
                    <el-form-item label="模型URL或模型名称">
                        <el-input v-model="query.name" clearable class="common-input" placeholder="请输入检测名称"></el-input>
                    </el-form-item>
                    <el-form-item class="leftmargin">
                        <el-button type="primary" @click="getData">确定</el-button>
                        <el-button @click="handleClean">重置</el-button>
                    </el-form-item>
                    <el-row>
                        <el-button type="primary" @click="handleAdd">新增</el-button>
                    </el-row>
                </el-form>
            </div>
            <el-table :data="tableData" class="table" align="center" stripe ref="table">
                <el-table-column type="index" align="center" width="90px" label="序号"></el-table-column>
                <el-table-column prop="modelName" align="center" label="模型URL或模型名称"></el-table-column>
                <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
                <el-table-column prop="jobState" align="center" label="任务状态">
                    <template slot-scope="scope">
                        <p style="color: gray;" v-if="scope.row.completedTime != null">已完成</p>
                        <p style="color: green;" v-else>进行中</p>
                    </template>
                </el-table-column>
                <el-table-column prop="completedTime" align="center" width="210px" label="完成时间">
                    <template slot-scope="scope">
                        <p v-if="scope.row.completedTime != null">{{ scope.row.completedTime }}</p>
                        <p v-else>--</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="180px">
                    <template slot-scope="scope">
                        <el-button type="text" class="blue" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                        <el-button type="text" class="blue"
                            @click="handleremove(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            query: {
                name: ''
            },
            tableData: [],
            pageTotal: 0,
        };
    },
    created() {
        this.getData();
    },
    destroyed() {

    },
    methods: {
        getData() {
            this.$http.fetchGet('api/warnNewAtack/listNewAtack', this.query).then(res => {
                console.log(res);
                this.tableData = res;
                this.pageTotal = res.length;
            }).catch(err => {
                this.tableData = [{
                    "id": 7,
                    "modelName": "secllm",
                    "createTime": "2024-06-21 14:01:27",
                    "completedTime": null
                }, {
                    "id": 8,
                    "modelName": "secllm",
                    "createTime": "2024-06-21 14:03:51",
                    "completedTime": null
                }, {
                    "id": 9,
                    "modelName": "secllm",
                    "createTime": "2024-06-21 14:24:55",
                    "completedTime": null
                }, {
                    "id": 25,
                    "modelName": null,
                    "createTime": "2024-06-21 19:40:58",
                    "completedTime": "2024-06-21 19:40:58"
                }]
                    ;
                this.pageTotal = this.tableData.length;
            })
        },
        handleAdd() {
            this.$sendLog({
                operateFuncName: "新型攻击",
                operateFuncKey: "New Attack Alert",
                operateInfo: "新增检测",
                operateKey: "add",
            })
            this.$router.push({ path: '/gongjiDetail' });
        },
        handleClean() {
            this.query.name = '';
            this.getData();
        },
        // 编辑操作
        handleEdit(index, row) {
            this.$sendLog({
                operateFuncName: "新型攻击",
                operateFuncKey: "New Attack Alert",
                operateInfo: "查看详情",
                operateKey: "view",
            })
            this.$router.push({ path: '/gongjiDetail', query: { id: row.id } });
        },
        handleremove(index, row) {
            // api/deleteOneNewAtack
            this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                this.$sendLog({
                    operateFuncName: "新型攻击",
                    operateFuncKey: "New Attack Alert",
                    operateInfo: "删除检测",
                    operateKey: "delete",
                })
                this.$http.fetchGet('api/deleteOneNewAtack',{
                    id:row.id
                }).then(res=>{
                    this.getData();
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                });
            }).catch(() => {
            });
            
        }
    }
};
</script>

<style scoped>
.common-width {
    width: 350px;
}

.common-input {
    width: 220px;
}


.table {
    width: 100%;
    font-size: 14px;
    margin-top: 10px;
}

.green {
    color: #67c23a;
}

.blue {
    color: #2468F2;
}

.origin {
    color: #ff7300;
}

.red {
    color: #f56c6c;
}

.leftmargin {
    margin-left: 10px;
}

.mr10 {
    margin-right: 10px;
}

.form>>>.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}

.table>>>.el-table th>.cell {
    font-weight: 400;
    font-size: 13px;
    color: black;
}
</style>
